<template>
	<view class="conmon-list u-f">
		<!-- 左边 -->
		<view class="conmon-list-l">
			<image :src="item.userpic" mode="widthFix" lazy-load=""></image>
		</view>
		<!-- 右边 -->
		<view class="conmon-list-r ">
			<view class="u-f-ac u-f-jsb">
				<view class="u-f-ac">{{item.username}} 
				<tag-sex-age :sex="item.sex" :age="item.age"></tag-sex-age>
				
				
				</view>
				<view v-show="!isguangzhu" class="icon iconfont icon-jia" @tap="guanzhu">关注</view>
			</view>
	
			<view>{{item.title}}</view>
			<view class="u-f-ajc">
				<!-- 图片 -->
				<image v-if="item.titlepic" :src="item.titlepic" mode="widthFix" lazy-load=""></image>
				<!-- 视频 -->
				<template v-if="item.video">
				<view  class="play icon iconfont icon-icon-xiaolian"></view>
				<view class="play-info">{{item.video.looknum}}次播放{{item.video.long}}</view>
				</template>
				<!-- 一下是分享样式 -->
				
				<view v-if="item.share" class="common-list-share u-f-ac">
					<image :src="item.share.titlepic" mode="widthFix" lazy-load=""></image>
					<view>{{item.share.title}}</view>
				</view>
				
			</view>
			<view class="u-f-ac u-f-jsb ">
				<!-- 左边 -->
				<view>{{item.path}}</view>
				<!-- 右边 -->
				<view class="u-f-ac u-f-ajc">
					<view class="icon iconfont icon-zhuanfa-">{{item.sharenum}}</view>
					<view class="icon iconfont icon-pinglun">{{item.commentnum}}</view>
					<view class="icon iconfont icon-linedesign-02">{{item.goodnum}}</view>
	
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>
	import tagSexAge from './tag-sex-age.vue';
	export default {
		components:{
			tagSexAge
		}
		,
		props:{
			item:Object,
			index:Number
		},
		data() {
			return {
				isguangzhu: this.item.isguanzhu
			}
		},
		methods:{
			guanzhu(){
				this.isguangzhu=true;
				uni.showToast({
					title: '关注成功'
				});
			}
			
		}
	}
	
</script>

<style scoped>
	.conmon-list{
		padding:20upx;
	}
	/* //touxiang */
	.conmon-list-l image{
		width: 80upx;
		height: 30upx;
		border-radius: 100%;
		
	}
	.conmon-list-r{
		flex: 1;
		margin-left: 15upx;
		border-bottom: 1upx  solid #EEEEEE;
		padding-bottom: 20upx;
	}
	.conmon-list-r>view:nth-child(1)>view:first-child{
		color: #999999;
		font-size: 30upx;
	}
	
	.conmon-list-r>view:nth-child(1)>view:last-child{
		background-color: #EEEEEE;
		padding: 0 10upx;
		font-size: 26upx;
		
	}
	.conmon-list-r>view:nth-child(2){
		font-size: 32upx;
		padding: 12upx 0;
	}
	.conmon-list-r>view:nth-child(3)>image{
		width: 100%;
		border-radius: 10upx;
		
	}
	.conmon-list-r>view:nth-child(4)>view{
		color: #AAAAAA;
	}
	.conmon-list-r>view:nth-child(4)>view:nth-child(2)>view{
		padding-left: 5upx;
		margin-left: 10upx;
	}
	/* 防止文字被压缩 */
	.conmon-list-l{
		flex-shrink: 0;
	}
	.conmon-list-r>view:nth-child(3)>image{
		width: 100%;
		border-radius: 10upx;
	}
	
	/* 视频 */
	.conmon-list-r>view:nth-child(3){
		
		position: relative;
	}
	.play-info,.play{
		position: absolute;
		color: #FFFFFF;
	
		
	}
	.play{
		
		font-size: 200upx;
	
	}
	.play-info{
		right: 15upx;
		bottom: 20upx;
		background-color: black;
		border-radius: 20upx;
		padding: 0 15upx;
	}
	
	/* 分享的图片视频缩略图类似 */
	.common-list-share{
		background: #EEEEEE;
		/* border: 1px solid ; */
		width: 100%;
		padding: 10upx;
		border-radius: 10upx;
	}
	.common-list-share image{
		width: 150upx;
		height: 150upx;
		margin-right: 10upx;
	}
</style>
